import React, { useState, useEffect, useRef, ReactNode } from 'react';
import "./index.scss"
// 定义组件的 props 类型
interface InViewProps {
    children: ReactNode; // React 节点
    onChange: (isVisible: boolean) => void; // 回调函数
    threshold?: number; // IntersectionObserver 的阈值
    root?: Element | null; // IntersectionObserver 的根元素
    rootMargin?: string; // IntersectionObserver 的根边距
}

// InView 组件 判断元素是否在视图中
const InView: React.FC<InViewProps> = ({ children, onChange, threshold = 0.1, root = null, rootMargin = '0px' }) => {
    const elementRef = useRef<HTMLDivElement | null>(null); // 使用 HTMLDivElement 类型
    const [isVisible, setIsVisible] = useState(false);
    useEffect(() => {
        const element = elementRef.current; // 将 elementRef.current 复制到局部变量
        if (!element) return;

        const observer = new IntersectionObserver(
            ([entry]) => {
                const isVisible = entry.isIntersecting;
                setIsVisible(isVisible);
                onChange(isVisible); // 触发回调函数
            },
            {
                threshold,
                root,
                rootMargin,
            }
        );

        observer.observe(element);

        return () => {
            observer.unobserve(element); // 使用局部变量 element
        };
    }, [onChange, threshold, root, rootMargin]);

    return (
        <div ref={elementRef} className="InView">
            {children}{isVisible}
        </div>
    );
};

export default InView;